<template>
	<view class="content">
		<view class="top">
			<checkbox-group @change="selectAllChange">
				<label class="radio">
					<checkbox class="check-box" value="all" :checked="isAllChecked=='true'?true:false" backgroundColor="#F7F8FA"
						activeBackgroundColor="#2979ff" activeBorderColor="#" iconColor="#FFFFFF" />全选
				</label>
			</checkbox-group>


			<view class="" @click="openAll()">
				{{ isOpen ? "收起" : "展开" }}
			</view>
		</view>

		<!-- <view class="top">
			<checkbox-group @change="selectAllChange">
				<label class="radio">
					<checkbox class="check-box" value="1" :checked="isAllChecked" backgroundColor="#F7F8FA"
						activeBackgroundColor="#2979ff" activeBorderColor="#" iconColor="#FFFFFF" />全选
				</label>
			</checkbox-group>
			<uni-section type="line">
				<uni-data-select class="section-text" v-model="readValue" :localdata="readRange"
					:clear="false"></uni-data-select>
			</uni-section>
			<uni-section type="line">
				<uni-data-select class="section-text" v-model="timeValue" :localdata="timeRange"
					:clear="false"></uni-data-select>
			</uni-section>
		</view> -->

		<!-- 阅读理解 -->
		<view class="follow-read">
			<checkbox-group @change="checkboxStudentChange">
				<view v-for="(item,index) in shujus" :key="index">
					<view class="follow-read">
						<label class="check-all-follow-read">
<!--							 :value="String(index)" -->
							<checkbox :value="String(index)" :checked="checkedList.includes(String(index))" backgroundColor="transparent"
								activeBackgroundColor="#2979ff" activeBorderColor="#" iconColor="#FFFFFF" />
							
							
							<!-- <checkbox :value="String(item.value)" :checked="checkedArr.includes(String(item.value))"
								:class="{'checked':checkedArr.includes(String(item.value))}"></checkbox> -->
						</label>
					</view>
					<uni-collapse ref="collapse">

						<uni-collapse-item class="word-title" title="" :open="item.open" title-border="none">
							<view style="">

							</view>
							<view class="article-list">
								<view class="article-content">
									{{item.templateSettings.content}}
								</view>
								<view class="article-question"  v-for="(items,indexs) in item.questions" :key="indexs">
									<view class="question-title"  style="white-space:pre-line">
										{{items.trunk.body}}
									</view>
									<view v-if="items.trunk.attachments[0].url.indexOf('.png')==-1">
										<AudioPlayer :src="resmain+items.trunk.attachments[0].url" :index="'audit_'+index+'_'+indexs" :ref="'audit_'+index+'_'+indexs"/>
									</view>
									<view v-else>
										<image :src="resmain+items.trunk.attachments[0].url" style="width: 120rpx;height: 120rpx;"></image>
									</view>
									<view v-if="items.children.length>0" >
										<view  class="question-title"  v-for="(childrenItem,indexss) in items.children">
											<view style="white-space:pre-line">
												{{ childrenItem.trunk.body }}
											</view>
											<view v-if="childrenItem.trunk.attachments.length > 0">
<!--												<AudioPlayer :src="resmain + childrenItem.trunk.attachments[0].url" />-->
												<view v-if="childrenItem.trunk.attachments[0].url.indexOf('.png')==-1">
													<AudioPlayer :src="resmain+childrenItem.trunk.attachments[0].url" :index="'audit_c'+index+'_'+indexs+'_'+indexss" :ref="'audit_c'+index+'_'+indexs+'_'+indexss"/>
												</view>
												<view v-else>
													<image :src="resmain+childrenItem.trunk.attachments[0].url" style="width: 120rpx;height: 120rpx;"></image>
												</view>
											</view>
										</view>
									</view>
<!--									 v-else-->
									
									<!-- 音频播放组件-支持拖拽播放 -->

									
									
									<!-- <view class="question-answer-list">
									<text class="article-answer">He is Chinese.</text>
									<text class="article-answer">He is Japanese.</text>
									<text class="article-answer">He is American.</text>
								</view> -->
								</view>
<!--								<view class="question-answer">-->
<!--									<switch checked @change="switchAnswerChange($event,item,index)" style="transform:scale(0.4)" />-->
<!--									<uni-collapse ref="collapse" class="question-answer-collapse">-->
<!--										<uni-collapse-item class="word-title" title="正确答案：" :showArrow="false" :open="item.currentIndex" :morenHeight="0"-->
<!--											title-border="none">-->
<!--											<view class="word-right">-->
<!--												<view class="desc">-->
<!--													<view  v-for="(itemti,indexti) in item.questions" :key="indexs">-->
<!--														<view v-if="itemti.children.length==0">{{itemti.answer?itemti.answer:""}}</view>-->
<!--														<view v-if="itemti.children.length>0">-->
<!--															<view v-for="(itemsti,indexsti) in itemti.children">-->
<!--																{{itemsti.sort}}. {{itemsti.answer}}-->
<!--															</view>-->
<!--														</view>-->
<!--													</view>-->
<!--												</view>-->
<!--											</view>-->
<!--										</uni-collapse-item>-->
<!--									</uni-collapse>-->
<!--								</view>-->
								
								<view class="descItem">
									<view class="course-grade">
										<view class="grade-text" :class="{'active-tab': item.currentIndex}" style="display: flex;align-items: center"
										   >
											<switch :checked="item.currentIndex" @change="switchAnswerChange($event,item,index)" style="transform:scale(0.4)" />
											<view class="text"  @tap="switchAnswerChange($event,item,index)"> 参考答案： </view>
										</view>
									</view>
									<view class="desc" v-if="item.currentIndex">
										<view v-for="(itemti,indexti) in item.questions">
											<view v-if="itemti.children.length==0">{{itemti.answer}}</view>
											<view v-if="itemti.children.length>0">
												<view v-for="(itemsti,indexsti) in itemti.children">
													{{Number(itemsti.sort)-1}}. {{itemsti.answer}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</checkbox-group>
		</view>

		<!-- 黑布林 -->
		<!-- <view class="container">
			<view class="audio-player" @tap="togglePlayback"></view>
			<text>
				Timus Murtazin comes
			</text>
		</view> -->

		<!-- 单词跟读 -->
		<!-- <view class="follow-read">
			<checkbox-group class="check-all-follow-read" @change="selectAllChange">
				<label>
					<checkbox value="1" :checked="isAllChecked" backgroundColor="#F7F8FA"
						activeBackgroundColor="#2979ff" activeBorderColor="#" iconColor="#FFFFFF" />
				</label>
			</checkbox-group>
			<uni-collapse ref="collapse">
				<uni-collapse-item class="word-title" title="第1-6个单词" open="true" title-border="none">
					<view class="word-list">
						<view class="word-item" v-for="(item,index) in wordList" :key="index">
							<checkbox-group v-model="checkedList">
								<label>
									<checkbox :checked="isAllChecked || checkedList.includes(item)" :value="item"
										backgroundColor="#F7F8FA" activeBackgroundColor="#2979ff" activeBorderColor="#"
										iconColor="#FFFFFF" />
								</label>
							</checkbox-group>
							<text class="word-text">{{item}}</text>
							<view class="play-pause" @tap="togglePlayback">
								<image class="paly-icon" src="@/static/audio.png" mode=""></image>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view> -->


		<!-- <view class="video-player">
			<video id="myVideo" :src="playSrc" @error="videoErrorCallback" controls></video>
		</view>
		<view class="video-intro">
			<text class="video-name">{{playName}}</text>
		</view> -->
		
		
		<view v-if="checkedList.length!=0">
			 <BottomChoose :time='unique1(checkedList).length*3' :number='unique1(checkedList).length' @handleEvent2="handleClickNext" />
		</view>
	</view>
</template>

<script>
	import request from "@/common/request.js"
	import BottomChoose from '@/components/BottomChoose/index.vue';
	import AudioPlayer from '@/components/AudioPlayer/index.vue';
	export default {
		components: {
			BottomChoose,
			AudioPlayer
		},
		data() {
			return {
				shujus: [],
				playName: '外教带你看世界',
				playSrc: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
				audioSrc: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
				readValue: 0,
				timeValue: 0,
				value: 0,
				readRange: [{
						value: 0,
						text: "跟读"
					},
					{
						value: 1,
						text: "朗读"
					},
				],
				timeRange: [{
						value: 0,
						text: "1次"
					},
					{
						value: 1,
						text: "2次"
					},
					{
						value: 2,
						text: "3次"
					},
				],
				isPlaying: false,
				audioCtx: null,
				wordList: ['rudrly', 'business', 'bear', 'my', 'name', 'hello'],
				isAllChecked: false,
				checkedList: [], // 选中集合

				openAnswer: true,
				id: '',
				page: 1,
				pageSize: 10,
				tid:0,
				pid:0,
				xuanzhede_ti:[],
				versionId:0,
				tabarTitle:"",
				resmain:"",
				isOpen:true,
				kechengId:""
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.title,
			});
			this.$nextTick(()=>{
				this.tabarTitle = option.bartTitle;
				this.tid=option.shuji_id;
				this.pid=option.pid;
				this.versionId=option.versionId
				this.kechengId = option.kechengId
				this.id = option.id.toString()
				this.isAllChecked=option.isAllChecked
				this.xiugai()
				//console.log(this.xuanzhede_ti,'进来')
			})
			// else{
			// 	//console.log(22)
			// 	this.isAllChecked=false
			// }
			
		},
		created() {
			this.initAudio();
		},
		onShow(){
		
		},
		onUnload(){
		
		},
		methods: {
			handleSwitchTab(item,index) {
				item.currentIndex = item.currentIndex==null?(item.currentIndex=true):(item.currentIndex?false:true);
				this.shujus.splice(index,1,item);
			},
			/**
			 * 计算给定字段的总计
			 * @param {Array} array 对象数组数据
			 * @param {String} computedField  需要进行合计的字段名
			 * @return {Number} 合计后的结果
			 */
			totalSum(array, computedField) {
				if (!array || array.length === 0) {
					return 0
				} else {
					return array.reduce((value, item) => value + +item[computedField], 0)
				}
			},
			openAll(){
				this.isOpen = !this.isOpen;
				//console.log("====",this.isOpen)
				if(!this.isOpen){
					this.shujus.forEach((item)=>{
						item.open = false;
					})
				}else{
					this.shujus.forEach((item)=>{
						item.open = true;
					})
				}
				//console.log("=====this.shujus",this.shujus)
			},
			/** 数组去重
			 * 思路：利用数组原型对象上的 filter 和 includes 方法
			 * @param arr 需要去重的数组
			 * @param t 根据 t 字段(指定)进行去重
			 * @returns {*[]} 已去重后的数据
			 */
			deduplicate(arr, t = "") {
			  let newArr = []
			  // 有指定字段
			  if (t) {
			    newArr = arr.filter(function (item) {
			      return newArr.includes(item[t]) ? "" : newArr.push(item[t])
			    })
			  }
			  // 无指定字段
			  else {
			    newArr = arr.filter(function (item) {
			      return newArr.includes(item) ? "" : newArr.push(item)
			    })
			  }
			  return newArr
			},
			/** 数组去重结束**/
			// 单个勾选
			checkboxStudentChange(e) {
				this.alarms = []
				this.checkedList = e.detail.value;
				
				
				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
				if (this.checkedList.length > 0 && this.checkedList.length == this.shujus.length) {
					this.isAllChecked = true;
				
				
					// //console.log(sig)
				} else {
					this.isAllChecked = false;
				}
					
				
				if(this.checkedList.length!=0){
					this.checkedList.forEach((item, index) => {
						//console.log(item,'11')
						let itemVal = String(item)
						this.alarms.push(itemVal);
					})
					// 检查数组中是否已存在具有相同 pid 的对象
					let existingItem = this.xuanzhede_ti.find(items => items.pid == this.pid);
					if(existingItem){
						this.xuanzhede_ti.map((items)=>{
							if(this.pid == items.pid){
								items.ti = this.alarms
							}
						})
					}else{
						let sig={
							'pid':this.pid,
							'tid':this.versionId,
							'ti':this.alarms,
							"kechengId":this.kechengId
						}
						this.xuanzhede_ti.push(sig)
					}
					//console.log("选择的ti",this.xuanzhede_ti)
					
				}else{
					uni.removeStorage({
					  key: 'xuanzhede_ti',
					  success: function() {
					    //console.log('清除成功');
					  },
					  fail: function() {
					    //console.log('清除失败');
					  }
					})
				}
				
				
			},
			xiugai() {
				var that = this
				that.alarms=[]
				var data = {
					id: that.id,
					page: that.page,
					pageSize: that.pageSize,
				}
				let url = "";
				if(this.tabarTitle == '听说'){
					url = "hearsay/questions";
					// url = "new_homework/teacher_homework_detail_question_list";
				}
				if(this.tabarTitle == '听力'){
					url = "listening/questions";
				}
				if(this.tabarTitle == '跟读'){
					url = "repeat/questions";
				}
				if(this.tabarTitle == '笔试'){
					url = "writing/questions";
				}
				if(this.tabarTitle == '音标'){
					url = "soundmark/questions";
				}
				if(this.tabarTitle == '典范'){
					url = "modelsp/questions";
				}
				if(this.tabarTitle == '新概念'){
					url = "newconcept/questions";
				}
				if(this.tabarTitle == '黑布林'){
					url = "blackplum/questions";
				}
				if(this.tabarTitle == '教材同步'){
					url = "textbook/wordinfo";
				}
				that.$post(url, data).then(res => {
					if (res.code != 0) {
						that.resmain = res.data.resmain;
						if(this.tabarTitle == '教材同步'){
							that.shujus = res.data.resource;
						}else{
							that.shujus = res.data.resource.items
						}
						console.log(res.data.resource.items,that.shujus)
						that.checkedList = [];
						that.shujus.map((item, index) => {
							item.currentIndex = false;
							if(	that.isAllChecked=='true'){
								item.isChecked = true;
								that.checkedList.push(String(index));
							}else{
								item.isChecked = false;
							}
							if(uni.getStorageSync("xuanzhede_ti")&&that.isAllChecked=='false'){
								that.isAllChecked=false
								that.xuanzhede_ti = uni.getStorageSync("xuanzhede_ti");
								//console.log("111===that.xuanzhede_ti",that.xuanzhede_ti)
								if(that.xuanzhede_ti.length>0){
									that.xuanzhede_ti.map((items)=>{
										if(this.pid == items.pid){
											let sfig=items.ti
											sfig.forEach((item, index) => {
												//console.log(item,'this.xuanzhede_ti')
												let itemVal = String(item)
												if(!that.checkedList.includes(item)){
													that.checkedList.push(itemVal);
												}
											})
										}
									})
								}
							}
							item.open = true
						})
						//console.log(that.checkedList,'----------')
						let quocng=	this.unique1(that.checkedList)
						//console.log(quocng)
						// 检查数组中是否已存在具有相同 pid 的对象
						let existingItem = that.xuanzhede_ti.find(items => items.pid == this.pid);
						if(existingItem){
							that.xuanzhede_ti.map((items)=>{
								if(this.pid == items.pid){
									items.ti = quocng
								}
							})
						}else{
							let sig={
								'pid':that.pid,
								'tid':that.versionId,
								'ti':quocng,
								"kechengId":that.kechengId
							}
							//console.log(sig.ti)
							that.xuanzhede_ti.push(sig)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			 unique1(arr){
			  var hash=[];
			  for (var i = 0; i < arr.length; i++) {
			     if(hash.indexOf(arr[i])==-1){
			      hash.push(arr[i]);
			     }
			  }
			  return hash;
			},
			goBack() {
				// 返回上一页
				uni.navigateBack({
					delta: 1 // 默认值是1，表示返回的页面层数
				});
			},
			handleClickNext() {
				var that = this;
				uni.setStorageSync('xuanzhede_ti', that.xuanzhede_ti);
				this.goBack()
			},
			initAudio() {
				this.audioCtx = uni.createInnerAudioContext();
				this.audioCtx.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';
				this.audioCtx.onPlay(() => {
					this.isPlaying = true;
				});
				this.audioCtx.onPause(() => {
					this.isPlaying = false;
				});
				this.audioCtx.onEnded(() => {
					this.isPlaying = false;
				});
				this.audioCtx.onError((err) => {
					console.error('音频播放错误:', err);
				});
			},
			togglePlayback() {
				if (this.isPlaying) {
					this.audioCtx.pause();
				} else {
					this.audioCtx.play();
				}
			},


			// 全选
			selectAllChange(e) {
			
				this.alarms=[]
				let chooseItem = e.detail.value;
				// 全选
				if (chooseItem[0] == 'all') {
					this.isAllChecked = true;

					this.shujus.forEach((item, index) => {
						let itemVal = String(index)
						if (!this.checkedList.includes(itemVal)) {
							this.checkedList.push(itemVal);
						}
					})
					var ssd =this.checkedList.map(Number).join(',');
					this.alarms.push(ssd);
					// 检查数组中是否已存在具有相同 pid 的对象
					let existingItem = this.xuanzhede_ti.find(items => items.pid == this.pid);
					if(existingItem){
						this.xuanzhede_ti.map((items)=>{
							if(this.pid == items.pid){
								items.ti = this.alarms
							}
						})
					}else{
						let sig={
							'pid':this.pid,
							'tid':this.versionId,
							'ti':this.alarms,
							"kechengId":this.kechengId
						}
						//console.log(sig.ti)
						this.xuanzhede_ti.push(sig)
					}
				} else {
					// 取消全选
					this.isAllChecked = false;
					this.checkedList = [];
					let existingItem = this.xuanzhede_ti.find(items => items.pid == this.pid);
					if(existingItem){
						this.xuanzhede_ti.map((items)=>{
							if(this.pid == items.pid){
								items.ti = []
							}
						})
					}
				}
				//console.log("===checkedList",this.shujus);
			},
		
			
			switchAnswerChange(e,item,index) {
				item.currentIndex = item.currentIndex==null?(item.currentIndex=true):(item.currentIndex?false:true);
				console.log(item.currentIndex,item.currentIndex==null,"====e,item,index",e,item,index)
				this.shujus.splice(index,1,item);
			}
		}
	}
</script>

<style>
	.content {
		width: 686rpx;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.radio {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
	}

	.follow-read {
		width: 686rpx;
		position: relative;
		margin-bottom: 24rpx;
	}

	.check-all-follow-read {
		position: absolute;
		top: 20rpx;
		left: 32rpx;
	}

	.video-player {
		width: 686rpx;
		height: 400rpx;
		border-radius: 24rpx;
		overflow: hidden;
	}

	#myVideo {
		width: 686rpx;
		height: 400rpx;
	}

	.video-intro {
		width: 686rpx;
		min-height: 124rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(74, 144, 246, 0.06);
		border-radius: 24rpx;
		margin: 24rpx auto;
		padding: 40rpx 28rpx 40rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.video-name {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
	}

	.container {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 32rpx 40rpx;
		box-sizing: border-box;
	}

	.audio-player {
		width: 622rpx;
		height: 104rpx;
		background-color: rgba(41, 121, 255, 0.05);
		border-radius: 12rpx;
		background-image: url('../../static/audio.png');
		background-size: 32rpx 40rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-position-x: 55%;
		margin-bottom: 32rpx;
	}

	.word-title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.word-list {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.word-item {
		width: 298rpx;
		height: 104rpx;
		background: rgba(41, 121, 255, 0.05);
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 34rpx 32rpx;
		box-sizing: border-box;
	}

	.word-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		flex: 1;
		margin-left: 15rpx;
	}

	.play-pause {
		font-size: 20px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.paly-icon {
		width: 32rpx;
		height: 40rpx;
	}

	.article-list {
		padding: 0 32rpx 32rpx;
		box-sizing: border-box;
	}

	.article-content {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 46rpx;
		text-align: justify;
		font-style: normal;
		margin-bottom: 48rpx;
	}

	.article-question {}

	.question-title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 40rpx;
	}

	.question-answer-list {
		display: flex;
		flex-direction: column;
	}

	.article-answer {
		height: 68rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 34rpx;
		position: relative;
		padding-left: 98rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #A6A9BD;
	}

	.article-answer::after {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		background: #FFFFFF;
		border: 2rpx solid #F5F5F5;
		position: absolute;
		top: -17rpx;
		left: 0;
		text-align: center;
		line-height: 64rpx;
	}

	.article-answer:nth-child(1)::after {
		content: 'A';
	}

	.article-answer:nth-child(2)::after {
		content: 'B';
	}

	.article-answer:nth-child(3)::after {
		content: 'C';
	}

	.question-answer {
		display: flex;
		align-items: baseline;
	}

	.question-answer-collapse {
		width: 240rpx;
	}

	.word-right {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #2979FF;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: uppercase;
	}
	.totalContent .lists .showRow .descItem {
		border-top: 2rpx solid #eee;
		padding: 20rpx 0;
	}
	
	/* course-grade */
	.course-grade {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #fff;
		/* height: 90rpx; */
		font-weight: 600;
		font-size: 13px;
		margin: 20rpx 0 40rpx;
	}
	
	.course-grade .grade-text {
		margin-right: 40rpx;
		/* line-height: 80rpx; */
		font-weight: 600;
		font-size: 16px;
		color: #222222;
	}
	
	.course-grade .active-tab {
		color: #2979FF;
	}
</style>